export default {
  install (app) {
    app.directive('get-img', {
      beforeMount (el) {
        console.log(el)
      }
    })
    // 失败图片处理
    app.directive('default-img', {
      beforeMount (el) {
        const imgURL = el.src
        if (imgURL) {
          const img = new Image()
          img.src = imgURL
          img.onerror = function () {
            el.src = 'https://oss.dingdongdr.com/static/rests/default.png'
          }
        }
      }
    })
    // 自动聚焦 v-focus
    app.directive('focus', (el) => {
      console.log(el)

      if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
        // 如果直接是input标签/textarea标签
        el.focus()
      } else {
        // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
        const inp = el.querySelector('input')
        const textArea = el.querySelector('textarea')
        // 如果找到了
        if (inp || textArea) {
          inp && inp.focus()
          textArea && textArea.focus()
        } else {
          // 本身也不是, 子标签里也没有
          console.error('请把v-fofo用在输入框标签上')
        }
      }
    })
    // 节流
    app.directive('throttle', {
      mounted (el, binding) {
        // 至少需要回调函数以及监听事件类型
        if (typeof binding.value.fn !== 'function' || !binding.value.event) {
          return
        }
        const delay = 200
        el.timer = null
        el.handler = function () {
          if (el.timer) return
          el.timer = setTimeout(() => {
            binding.value.fn.apply(this, arguments)
            el.timer = null
          }, binding.value.delay || delay)
        }
        el.addEventListener(binding.value.event, el.handler)
      },
      // 元素卸载前也记得清理定时器并且移除监听事件
      beforeMount (el, binding) {
        if (el.timer) {
          clearTimeout(el.timer)
          el.timer = null
        }
        el.removeEventListener(binding.value.event, el.handler)
      }
    })
    // 防抖函数
    app.directive('debounce', {
      mounted (el, binding) {
        // 至少需要回调函数以及监听事件类型
        if (typeof binding.value.fn !== 'function' || !binding.value.event) {
          return
        }
        const delay = 200 // 默认延迟时间
        el.timer = null
        el.handler = function () {
          if (el.timer) {
            clearTimeout(el.timer)
            el.timer = null
          }
          el.timer = setTimeout(() => {
            binding.value.fn.apply(this, arguments)
            el.timer = null
          }, binding.value.delay || delay)
        }
        el.addEventListener(binding.value.event, el.handler)
      },
      // 元素卸载前也记得清理定时器并且移除监听事件
      beforeMount (el, binding) {
        if (el.timer) {
          clearTimeout(el.timer)
          el.timer = null
        }
        el.removeEventListener(binding.value.event, el.handler)
      }
    })
    // 一键复制
    app.directive('copy', {
      mounted (el, { value }) {
        el.$value = value

        // el控件定义 onclick 事件
        el.onclick = () => {
          // if (!el.$value) {
          //   // 值为空的时候，给出提示。可根据项目UI仔细设计
          //   console.log('无复制内容')
          //   return
          // }
          // 动态创建 textarea 标签
          const textarea = document.createElement('textarea')
          // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
          textarea.readOnly = 'readonly'
          textarea.style.position = 'absolute'
          textarea.style.left = '-9999px'
          // 将要 copy 的值赋给 textarea 标签的 value 属性
          // textarea.value = el.$value
          textarea.value = el.$value
          // 将 textarea 插入到 body 中
          document.body.appendChild(textarea)
          // 选中值并复制
          textarea.select()
          const result = document.execCommand('Copy')
          if (result) {
            console.log('复制成功') // 可根据项目UI仔细设计
          }
          document.body.removeChild(textarea)
        }
        // 绑定点击事件，就是所谓的一键 copy 啦
        el.addEventListener('click', el.handler)
      },
      // 当传进来的值更新的时候触发
      beforeUpdate (el, { value }) {
        el.$value = value
      },
      // 指令与元素解绑的时候，移除事件绑定
      unmounted (el) {
        el.removeEventListener('click', el.handler)
      }
    })
    // 日期格式化
    app.directive('format-time', {
      created (el, bindings) {
        bindings.formatString = 'YYYY-MM-DD HH:mm:ss'
        if (bindings.value) {
          bindings.formatString = bindings.value
        }
      },
      mounted (el, bindings) {
        const textContent = el.textContent
        const timestamp = parseInt(textContent) + '%'

        el.textContent = timestamp
      }
    })
    // 水印
    app.directive('watermark', {
      created (el, binding, vnode, prevVnode) {
        console.log(binding, vnode, prevVnode)
        const div = document.createElement('div')
        el.style.position = 'relative'
        div.style.width = '100%'
        div.style.height = '100%'

        const { text1, text2, font, textColor } = binding.value
        ;(function addWaterMarker (str1, str2, parentNode, font, textColor) {
          // str1、str2水印文字，父元素，字体，文字颜色
          const img = document.createElement('canvas') // 创建canvas元素
          parentNode.appendChild(img)
          img.width = 50
          img.height = 50
          img.style.zIndex = '999'
          img.style.display = 'none'
          const image = img.getContext('2d') // 获取canvas画布
          image.rotate((-25 * Math.PI) / 180) // 逆时针旋转π/9
          image.globalAlpha = 1 // 透明度
          image.font = font || '18px Microsoft Yauheni '
          image.fillStyle = textColor || 'rgba(200, 200, 200, 1)'
          image.textAlign = 'left'
          image.textBaseline = 'Middle'
          image.fillText(str1, 0, 50) // 第一行字体
          parentNode.style.backgroundImage =
            'url(' + img.toDataURL('image/png') + ')'
        })(text1, text2, el, font, textColor)
      }
    })
  }
}
